<template>
  <div class="main-con">
    <div class="dong-tai" v-if="settings.info_block_show">
      <news-block :menuName="menuName" @jumpDetails="jumpDetails" />
    </div>
    <div class="xinwen" v-if="settings.info_block_show">
      <process-entry-block v-if="settings.process_quick" />
      <public-info-block
        :menuName="menuName"
        @jumpDetails="jumpDetails"
        :settings="settings"
      />
    </div>
    <div class="application">
      <div class="app">
        <div class="high-title">
          <div style="display: flex; width: 30%">
            <img src="@/assets/images/application.4ed83b80.svg" alt="" />
            <span>{{ $t("应用中心", "index.appCenter") }}</span>
          </div>
          <div>
            <el-input
              v-model="search"
              size="small"
              :placeholder="$t('可搜索应用名称', 'index.canSearch')"
              suffix-icon="el-icon-search"
              style="width: 300px"
              @keydown.native.enter="searchApps"
            ></el-input>
          </div>
        </div>
        <div class="contents">
          <div class="con-header">
            <span
              style="padding-right: 16px"
              :style="{
                color:
                  acitveId === 0 ? 'rgb(76, 120, 252)' : 'rgb(100, 106, 115)',
              }"
              @click="acitveId = 0"
              >{{ $t("全部应用", "index.allApp") }}</span
            >
            <span
              v-for="item in appdata"
              :key="item.category_id"
              @click="acitveId = item.category_id"
              style="padding: 0 16px; border-left: 1px solid rgb(232, 234, 237)"
              :style="{
                color:
                  acitveId === item.category_id
                    ? 'rgb(76, 120, 252)'
                    : 'rgb(100, 106, 115)',
              }"
              >{{ item.category_name_zh }}</span
            >
          </div>
          <div class="con-show">
            <div v-for="item in appdata" :key="item.category_id">
              <div
                class="apps"
                v-if="acitveId === item.category_id || acitveId === 0"
              >
                <div class="top" @click="item.show = !item.show">
                  <i v-show="item.show" class="el-icon-caret-bottom"></i>
                  <i v-show="!item.show" class="el-icon-caret-right"></i>
                  <span>{{ item.category_name_zh }}</span>
                </div>
                <div class="bottom" v-show="item.show">
                  <div
                    v-for="ele in item.app_list"
                    :key="ele.app_id"
                    class="it"
                    @click="toApp(ele.app_id)"
                  >
                    <app-card
                      :type="cardType"
                      :appInfo="ele"
                      @updateSeleted="updateSeleted"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="my">
        <process-entry-block
          v-if="settings.process_quick && !settings.info_block_show"
        />
        <div class="recent">
          <div class="high-title">
            <div class="my-title">
              <img src="@/assets/icons/recently.svg" alt="" />
              <span>{{ $t("最近使用", "index.recentUse") }}</span>
            </div>
            <div class="include-apps">
              <div class="apps" v-if="newEmployee.last_use_app?.length">
                <div
                  class="side-app"
                  v-for="(item, index) in newEmployee.last_use_app"
                  :key="item.app_id"
                  @click="toApp(item.app_id)"
                >
                  <div class="left-content">
                    <div
                      :class="[
                        'dot',
                        index === 0
                          ? 'orange'
                          : index === 1
                          ? 'blue'
                          : index === 2
                          ? 'red'
                          : '',
                      ]"
                    ></div>
                    {{ item.app_name }}
                  </div>
                  <span>{{ getFromNow(item.used_time) }}</span>
                </div>
              </div>
              <div class="no-data" v-else>
                <img src="@/assets/icons/empty.svg" alt="" />
                <span>{{ $t("暂无数据", "index.noData") }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="collect">
          <div class="high-title">
            <div class="my-title">
              <img src="@/assets/icons/favorite.svg" alt="" />
              <span>{{ $t("我的收藏", "index.mySelected") }}</span>
            </div>
            <div class="include-apps">
              <div class="apps" v-if="newEmployee.selected_app?.length">
                <div
                  class="side-app"
                  v-for="(item, index) in newEmployee.selected_app"
                  :key="item.app_id"
                  @click="toApp(item.app_id)"
                >
                  <div class="left-content">
                    <div
                      :class="[
                        'dot',
                        index === 0
                          ? 'orange'
                          : index === 1
                          ? 'blue'
                          : index === 2
                          ? 'red'
                          : '',
                      ]"
                    ></div>
                    {{ item.app_name }}
                  </div>
                  <img
                    src="@/assets/images/collection.svg"
                    alt=""
                    @click.stop="removeSelected(item.app_id)"
                  />
                </div>
              </div>
              <div class="no-data" v-else>
                <img src="@/assets/icons/empty.svg" alt="" />
                <span>{{ $t("暂无数据", "index.noData") }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PortalIndex from "@/components/proportal/portalIndex/PortalIndex.vue";
import {
  getAllInfoBlock,
  getAllAppInCategory,
  getAllSettingsMap,
  updateRecentUse,
  updateSelected,
  updateViewed,
  getTargetCategoryApp,
} from "@/http/api";
import "dayjs/locale/zh-cn";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
import AppCard from "@/components/public/AppCard.vue";
import NewsBlock from "@/components/proportal/portalIndex/NewsBlock.vue";
import tools from "@/utils/tools";
import ProcessEntryBlock from "@/components/proportal/portalIndex/ProcessEntryBlock.vue";
import PublicInfoBlock from "@/components/proportal/portalIndex/PublicInfoBlock.vue";
export default {
  name: "proportal",
  components: {
    PortalIndex,
    AppCard,
    NewsBlock,
    ProcessEntryBlock,
    PublicInfoBlock,
  },
  data() {
    return {
      activeMenu: "",
      search: "",
      appdata: [],
      acitveId: 0,
      acitveId: 0,
      locale: "zh",
      cardType: 1,
      newEmployee: {},
      menuName: [],
      settings: {},
    };
  },
  async mounted() {
    this.locale = JSON.parse(localStorage.getItem("locale"));
    let res = await getAllInfoBlock();
    if (res.code === 20041) {
      this.menuName = res.data;
    }
    res = await getAllAppInCategory();
    if (res.code === 20041) {
      this.appdata = res.data;
    }
    res = await getAllSettingsMap();
    if (res.code === 20041) {
      this.settings = res.data;
      this.cardType = res.data.card_type;
    }
    this.newEmployee = JSON.parse(localStorage.getItem("userInfo"));
  },
  methods: {
    navClick(nav) {
      if (nav.menu_url.charAt(0) === "/") {
        this.activeMenu = nav.menu_id;
      } else {
        window.open(nav.menu_url, "_blank");
      }
    },
    toSystemtools() {
      window.open(window.location.origin + "/#/systemtools/main", "_blank");
    },
    logOut() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("cookie");
      this.$router.push("/login");
    },
    async jumpDetails(item) {
      await updateViewed(item.id);
      if (item.data_type === "out_link") {
        window.open(item.content, "__blank");
      } else {
        item.create_time = dayjs(item.create_time).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.$router.push({
          path: "/proportal/viewDetail",
          query: JSON.parse(JSON.stringify(item)),
        });
      }
    },
    async toApp(id) {
      let res = await updateRecentUse(id);
      if (res.code === 20031) {
        this.newEmployee = res.data;
        localStorage.setItem("userInfo", JSON.stringify(res.data));
      }
      this.$router.push({
        path: tools.getUrl(id),
        query: { mode: "submit" },
      });
    },
    getFromNow(time) {
      if (this.locale === "zh") {
        return dayjs(time).locale("zh-cn").fromNow();
      }
      return dayjs(time).fromNow();
    },
    async updateSeleted(newEmployee) {
      this.newEmployee = newEmployee;
      localStorage.setItem("userInfo", JSON.stringify(newEmployee));
      let res = await getAllAppInCategory();
      if (res.code === 20041) {
        this.appdata = res.data;
      }
    },
    async removeSelected(app_id) {
      let res = await updateSelected({
        app_id: app_id,
        mode: 0,
      });
      if (res.code === 20031) {
        this.updateSeleted(res.data);
      } else {
        this.$message.error(res.msg);
      }
    },
    async searchApps() {
      let res = await getTargetCategoryApp(this.search);
      if (res.code === 20041) {
        this.appdata = res.data;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.main-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .xinwen {
    width: 30%;
    margin-left: 16px;
    flex: 1;
  }
  .application {
    width: 100%;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    .app {
      width: calc(100% - 356px);
      padding: 24px;
      background-color: #fff;
      border-radius: 8px;

      .con-header {
        height: 36px;
        line-height: 36px;
        span {
          cursor: pointer;
        }
      }
      .con-show {
        .top {
          cursor: pointer;
        }
        .bottom {
          display: flex;
          flex-wrap: wrap;
          cursor: pointer;
          .it {
            display: flex;
            border-radius: 6px;
            margin: 8px;
            .right {
              display: flex;
              flex-direction: column;
              margin-left: 8px;
              .name {
                color: rgb(31, 35, 41);
                font-size: 16px;
              }
              .describe {
                color: rgb(100, 106, 115);
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .my {
      flex: 1;
      margin-left: 16px;
      display: flex;
      flex-direction: column;
      .high-title {
        flex-direction: column;
      }
      .recent {
        min-height: 325px;
        background-color: #fff;
        border-radius: 8px;
        .title {
          height: 36px;
          line-height: 36px;
          margin-bottom: 6px;
        }
      }
      .collect {
        margin-top: 16px;
        min-height: 325px;
        background-color: #fff;
        border-radius: 8px;
      }
      .side-app {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        cursor: pointer;
        .left-content {
          line-height: 50px;
          display: flex;
          align-items: center;
        }
        & > span {
          color: #8f959e;
          font-size: 12px;
        }
        .dot {
          width: 10px;
          height: 10px;
          background: #dee0e3;
          border-radius: 4px;
          margin-right: 8px;
          &.orange {
            background-color: #ffa665;
          }
          &.blue {
            background-color: #5682ff;
          }
          &.red {
            background-color: #eb5a6b;
          }
        }
        &:hover {
          background-color: #f5f6f7;
          img {
            display: block;
          }
        }
        img {
          display: none;
        }
      }
    }
  }
  :deep(.base-info) {
    display: flex;
    align-items: center;
    img {
      margin-left: 4px;
    }
  }
  :deep(.see-more) {
    color: rgb(100, 106, 115);
    font-size: 14px;
    cursor: pointer;
  }
  :deep(.high-title) {
    display: flex;
    justify-content: space-between;
    img {
      width: 24px;
      height: 24px;
    }
    span {
      font-size: 18px;
      font-weight: 500;
      height: 28px;
      line-height: 28px;
      display: inline-block;
      margin-left: 10px;
    }
    .title {
      color: rgb(100, 106, 115);
      cursor: pointer;
    }
    .active {
      color: rgb(76, 120, 252);
    }
    .my-title {
      display: flex;
      align-items: center;
      padding: 24px 24px 12px;
    }
    .include-apps {
      display: flex;
      flex-direction: column;
      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 160px;
          height: 160px;
        }
        span {
          color: #bbbfc4;
          font-size: 14px;
        }
      }
    }
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
<style lang="less">
.porportal-popover {
  padding: 4px 0;
  .last-menu {
    line-height: 20px;
    padding: 10px;
    width: 100%;
    color: #646a73;
    cursor: pointer;
    &:hover,
    &.active {
      color: #1f2329;
      background-color: #f2f4f7;
    }
  }
}
.proportal-tooltip.is-light {
  border: 0;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  .popper__arrow {
    left: 50% !important;
    transform: translateX(-50%);
    &::after {
      width: 10px;
      height: 10px;
      border: 0;
      border-color: #fff;
      background: #fff;
      transform: rotate(45deg);
    }
  }
}
</style>
